<template>
  <!-- 反馈 -->
  <view class="feedback container">
    <u--form
      labelPosition="left"
      :model="feedbackInfo"
      :rules="rules"
      ref="feedbackForm"
    >
      <u-form-item>
        <u-upload
          width="200rpx"
          height="200rpx"
          :fileList="feedbackInfo.imgList"
          @afterRead="afterRead"
          @delete="deletePic"
          uploadText="上传图片"
          multiple
          :maxCount="2"
        ></u-upload>
      </u-form-item>
      <u-form-item prop="feedback_content">
        <u--textarea
          v-model="feedbackInfo.feedback_content"
          count
          height="100"
          :maxlength="500"
          placeholder="请输入内容"
        ></u--textarea>
      </u-form-item>
    </u--form>

    <button
      class="circle-button btn-active"
      style="width: 90%"
      @click="submitFeedback"
    >
      提交
    </button>

    <u-overlay :show="show" @click="show = false">
      <view class="feedback-warp">
        <UserModel
          title="反馈成功"
          :content="content"
          :width="630"
          :height="536"
        />
      </view>
    </u-overlay>
  </view>
</template>

<script>
import { createModel } from "@/api";
import { UpdateFilePath } from "@/api/file";
import config from "@/common/config";
import UserModel from "@/subPages/user/components/UserModel.vue";
export default {
  components: {
    UserModel,
  },
  data() {
    return {
      feedbackInfo: {
        imgList: [],
        feedback_content: "",
      }, // 反馈信息
      rules: {
        feedback_content: {
          type: "string",
          required: true,
          message: "请输入反馈内容",
          trigger: ["blur", "change"],
        },
      },
      show: false,
      content:
        "感谢你对我们的关注与支持，我们会认真处理你的反馈，尽快完善相关功能",
    };
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this.feedbackInfo.imgList.splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.feedbackInfo.imgList.length;
      lists.map((item) => {
        this.feedbackInfo.imgList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this.feedbackInfo.imgList[fileListLen];
        this.feedbackInfo.imgList.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      let that = this;
      try {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: config.baseURL + UpdateFilePath,
            header: {
              Authorization: `${that.$storage.get("Token")}`,
            }, // 仅为示例，非真实的接口地址
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
              setTimeout(() => {
                console.log("上传成功", res, that.fileList1);
                let { data } = JSON.parse(res.data);
                resolve(data);
              }, 1000);
            },
          });
        });
      } catch (error) {
        console.log(error);
      }
    },

    // 提交反馈方法
    async submitFeedback() {
      let that = this;
      let result = await this.$refs.feedbackForm.validate();
      if (result) {
        let data = {
          feedback_content: this.feedbackInfo.feedback_content,
          feedback_img: that.feedbackInfo.imgList.map((item) => ({
            ...item.url,
            fileId: Date.now(),
          })),
        };
        let res = await createModel("65bc928c5efd5153ff55cf50", data);
        if (res.code === 200) {
          setTimeout(() => {
            this.show = true;
            this.feedbackInfo = {
              imgList: [],
              feedback_content: "",
            };
          }, 2000);
        }
      }
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.feedbackForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.feedback {
  position: relative;

  button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: constant(safe-area-inset-bottom) !important;
    bottom: env(safe-area-inset-bottom) !important;
  }

  &-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}
::v-deep .u-upload__wrap {
  justify-content: center;
  align-items: center;
}

::v-deep .u-upload__wrap > .u-upload__button {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 0;
}

::v-deep .u-textarea {
  margin: 0 20rpx;
  box-shadow: 0px 3px 12px 1px rgba(178, 178, 178, 0.16);
  border-radius: 10rpx;
}
</style>
